<template>
  <div class="rule-group">
    
    <div class="attendance-content" v-if="!hide">
       <div class="header-tip flex">
      <span>请先在【薪酬设置】设置企业的工资表模板，然后新增计薪规则【计时工资—>计件工资—>绩效规则—>津补贴规则—>计税规则—>考勤计薪规则——>薪资组】</span>
      <Icon type="ios-close" size="18" />
    </div>
    <div class="guide-intro">
      <div class="guide-title">使用指南</div>
      <div class="guide-content">
        <div class="guide-item">1、计税规则，由系统统一提供。请到【薪资组】关联人员，计薪规则及适用的个税规则。</div>
        <div class="guide-item">2、核算工资时，按员工适用的个税方案，自动计算出当月个税金额。</div>      </div>
    </div>

    <!-- <div class="query-section flex">
      <div class="left-query-wrap flex-box"></div>
      <Button class="save-btn-green" @click="toDetail">新增计薪方案</Button>
    </div> -->
    <div class="table-section">
      <Table width="100%" :columns="columns" :data="data4"></Table>
      <Nodata desc="暂无数据"></Nodata>
    </div>
    </div>

    <div class="sub-content" v-if="hide">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      vertical: "1",
      current: 0,
      formItem: {
        input: ""
      },
      modal2: false,
      data4: [
          {
              name:"工资薪金所得税",
              age:"工资薪金所得",
               province:"是",
                city1:"5000元/月",
                 city2:"个税结果保留2位小数",
                  city3:"--"
          }
      ],
      columns: [
        {
          title: "工资薪金所得税",
          key: "name"
        },
        {
          title: "个税类型",
          key: "age"
        },
        {
          title: "是否计税",
          key: "province"
        },
        {
          title: "起征点",
          key: "city1"
        },
        {
          title: "个税结果保留小数位",
          key: "city2"
        },
        {
          title: "适用薪资组",
          key: "city3"
        },
        {
          title: "操作",
          key: "action",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "text",

                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      this.toDetail(params.index);
                    }
                  }
                },
                "编辑"
              )
            ]);
          }
        }
      ]
    };
  },
  methods: {
    toDetail() {
      this.$router.push("/payroll/salary/rule/tax/detail");
    }
  },
  computed: {
    date() {
      let a = [];
      for (var i = 1; i <= 31; i++) {
        a.push(i);
      }
      return a;
    },
    hide() {
      let route = this.$route.matched;
      let matched = route[route.length - 1].path;
      return matched.includes("tax/detail");
    }
  }
};
</script>
<style lang="scss" scoped src='./index.scss'>
</style>